<template>
	<view class="schedule-box">
		<view class="top-bar">
			<view class="left-none"></view>
			<view class="right-date">
				<view class="date-item">日</view>
				<view class="date-item">一</view>
				<view class="date-item">二</view>
				<view class="date-item">三</view>
				<view class="date-item">四</view>
				<view class="date-item">五</view>
				<view class="date-item">六</view>
			</view>
		</view>
		<view class="main-content">
			<view class="left-bar">
				<view class="bar-item">
					<view class="number">1</view>
					<div class="time">
						<view class="start-time">8:00</view>
						<view class="end-time">8:40</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">2</view>
					<div class="time">
						<view class="start-time">8:45</view>
						<view class="end-time">9:25</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">3</view>
					<view class="time">
						<view class="start-time">9:55</view>
						<view class="end-time">10:35</view>
					</view>
				</view>
				<view class="bar-item">
					<view class="number">4</view>
					<div class="time">
						<view class="start-time">10:40</view>
						<view class="end-time">11:20</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">5</view>
					<div class="time">
						<view class="start-time">11:25</view>
						<view class="end-time">12:05</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">6</view>
					<div class="time">
						<view class="start-time">12:40</view>
						<view class="end-time">13:20</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">7</view>
					<div class="time">
						<view class="start-time">13:25</view>
						<view class="end-time">14:05</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">8</view>
					<div class="time">
						<view class="start-time">14:30</view>
						<view class="end-time">15:20</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">9</view>
					<div class="time">
						<view class="start-time">15:15</view>
						<view class="end-time">15:55</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">10</view>
					<div class="time">
						<view class="start-time">16:25</view>
						<view class="end-time">17:05</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">11</view>
					<div class="time">
						<view class="start-time">17:10</view>
						<view class="end-time">17:50</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">12</view>
					<div class="time">
						<view class="start-time">17:55</view>
						<view class="end-time">18:35</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">13</view>
					<div class="time">
						<view class="start-time">19:30</view>
						<view class="end-time">20:10</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">14</view>
					<div class="time">
						<view class="start-time">20:15</view>
						<view class="end-time">20:55</view>
					</div>
				</view>
				<view class="bar-item">
					<view class="number">15</view>
					<div class="time">
						<view class="start-time">21:00</view>
						<view class="end-time">21:40</view>
					</div>
				</view>
			</view>
			<view class="schedule-grid">
				<view class="col" v-for="(day_schedule,idx) in schedule" :key="idx">
					<view class="col-grid" :style="{'height': item.grid_cnt * 199.2 + 'rpx', backgroundColor: item.time != undefined ? `${getRandomColor()}` : ''}"
						v-for="(item,idx) in day_schedule.classes" :key="idx">
						<text>{{ item.class_name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				hi: 200,
				colorlist:['rgb(218, 174, 255)','rgb(255, 184, 184)','rgb(19, 180, 233)','rgb(179, 134, 216)','rgb(19, 233, 183)','rgb(239, 234, 144)','rgb(253, 132, 107)',],
				target:0
			}
		},
		computed: {
			...mapState({
				schedule: (state) => state.schedule.schedule,
			}),
			
		},
		onLoad() {
			console.log(this.schedule, this.schedule.length)
		},
		methods: {
			getRandomColor() {
			  if(this.target >= this.colorlist.length-1) this.target=0
			  return this.colorlist[this.target++];
			}
		}
	}
</script>

<style lang="scss">
	.schedule-box {
		padding-top: 100rpx;
	}

	.top-bar {
		display: flex;
		height: 100rpx;
		width: 100%;
		background-color: #eee;
		position: fixed;
		top: 0;
		left: 0;

		.left-none {
			width: 8%;
			background-color: #bbb;
		}

		.right-date {
			flex: 1;
			display: flex;

			.date-item {
				flex: 1;
				text-align: center;
				line-height: 100rpx;
				color: #aaa;
				font-size: 13px;
			}
		}
	}

	.main-content {
		display: flex;
		flex-direction: row;
		width: 100%;

		.left-bar {
			background-color: #eee;
			width: 8%;

			.bar-item {
				width: 100%;
				height: 199.2rpx;
				// line-height: 200rpx;
				text-align: center;
				font-size: 12px;
				color: #aaa;
				border-bottom: 1px dotted #ccc;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;

				.number {
					width: 100%;
				}

				.end-time,
				.start-time {
					font-size: 10px;
				}
			}
		}

		.schedule-grid {
			flex: 1;
			display: flex;

			.col {
				width: 100%;
				flex: 1;
				// display: flex;
				// flex-wrap: wrap;

				.col-grid {
					width: 100%;
					height: 200rpx;
					// line-height: 10px !important;
					text-align: center;
					border-right: 1px dotted #ccc;
					border-bottom: 1px dotted #ccc;
					font-size: 10px;
					display: flex;
					justify-content: center;
					align-items: center;

					// &:nth-child(1) {
					// 	height: 200rpx;
					// 	line-height: 200rpx;
					// }

					// &:nth-child(5) {
					// 	height: 2 * 200rpx;
					// 	line-height: 2 * 200rpx;
					// }
				}
			}
		}
	}
</style>